<template>
  <el-container>
    <el-header >
        <el-card style="background: paleturquoise">四喜商城欢迎您,
          <span v-if="userid==null">请<el-button type="text" @click="loginUser()" align="right">登录</el-button></span>
          <span v-if="userid!=null"><el-button type="text" @click="outuser()" align="right">退出登录</el-button>
          <el-button type="text" @click="goorder()" align="right">我的订单</el-button>
          </span>
          </el-card>
    </el-header>

    <el-main>
      <el-button  @click="opencart()">我的购物车</el-button>
      <el-row>
        <el-col :span="4" v-for="(o) in tableData" :key="o.index"  >
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img :src="o.pic" class="image">
            <div style="padding: 14px;">
              <span style="color: red;font-size: 30px">￥{{o.price}}.00</span><br>
              <span>{{o.gname+o.color+o.bname+o.tname}}</span>
              <div class="bottom clearfix">
                <time class="time">{{ 111 }}</time><br>
                <el-button type="danger" @click="handleEdit(o)" >加入购物车</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

  </el-container>
</template>

<script>
export default {
  name: "Goods",
  data() {
    return {
      tableData: {},
      userid:"",
    }
  },
  methods:{
    getgoods(){
      this.axios.get("http://localhost:9999/goods/getgoods",).then((res)=>{
        if (res){
          this.tableData=res.data.records;
          this.userid=localStorage.getItem("token");
          console.log("商品界面:",res.data);
        }
      })
    },
    handleEdit(row){
      console.log("数据:",row);
      if (localStorage.getItem("token")==null){
        this.$message.error("您还没有登录,请前往登录!");
        this.$router.push({path:"/user"});
      }else{
        this.axios.post("http://localhost:9999/cart/addcart",row).then((res)=>{
          if (res){
            this.$message.success("添加到购物车成功!");
          }
        })
      }
    },
    opencart(){
      if (localStorage.getItem("token")==null){
        this.$message.error("您还没有登录,请前往登录!");
        this.$router.push({path:"/user"});
      }else{
        this.$router.push({path:"/cart"});
      }
    },
    outuser(){
      localStorage.removeItem("token")
      this.$message.success("退出成功!");
      location.reload()
    },
    loginUser(){
      this.$router.push({path:"/user"});
    },
    goorder(){
      this.$router.push({path:"/order"});
    },
  },
  created() {
    this.getgoods();
  }
}
</script>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>